<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

		<!--css-->
		    <style type="text/css"> 
		    table,table tr th, table tr td { border:1px solid #b1adb0; }
		            table {
						min-width: 200px;
						min-height: 25px;
						line-height: 25px;
						text-align: center;
						 border-collapse: collapse;
						 }   

		    </style> 
	</head>
	<body>
		<div id="app">
			{{ message }}
		</div>
		<hr>
		<div id="app-2">
			<span v-bind:title="message">
				鼠标悬停几秒钟查看此处动态绑定的提示信息！
			</span>
		</div>
		<hr>
		
		<!-- if的使用 -->
		<div id="app-3">
			<p v-if="seen">现在你看到我了</p>
		</div>
		<hr>
		<!-- 遍历数组的使用 -->
		<div id="app-4">
			<ol>
				<li v-for="todo in todos">
					{{ todo.text }}
				</li>
			</ol>
		</div>
		<hr>
		<!-- 通过按钮触发方法 -->
		<div id="app-5">
			<p>{{ message }}</p>
			<button v-on:click="reverseMessage">反转消息</button>
		</div>
		<hr>
		<div id="app-6">
			<p>{{ message }}</p>
			<button v-on:click="reverseMessageFortwo">反转消息</button>
		</div>
		<hr>
		<!-- 状态和数据的实时绑定 -->
		<div id="app-7">
			<p>{{ message }}</p>
			<input v-model="message">
		</div>
		<hr>

<!-- 引入组件绑定 -->
		<div id="app-8">
			<ol>
				<!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
				<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
			</ol>
		</div>
		<hr />
		<!-- vue复选框的使用 -->
		<div id="app-9">
			<a v-bind:href="ahref">百度一下</a>
			<!--下面是简写方式 ：属性-->
			<input type="checkbox" checked :disabled="isDisabled"/>
		</div>
		<hr>
		<!-- js和jquery复选框的使用-->
			<input id="app-10js" type="checkbox" />

<!-- //------ -->

<div >
	<ol>
		<li v-for="item in bookList">
			{{ item.id }}-{{ item.name }}-{{ item.date }}-{{ item.price }}-{{ item.num }}
		</li>
	</ol>
	
</div>

<div id="book">
  {{ message }} 
  <p>{{ num1 }}</p>
  <table>
    <tr>
      <!-- <th>序号</th> -->
      <th v-for="th in tableTh" >
        {{th.title}}
      </th>
    </tr>
    <tr v-for="(tr,index) in bookList">
      <!-- <td>{{index+1}}</td> -->
      <td>{{tr.id}}</td>
	  <td>{{tr.name}}</td>
	  <td>{{tr.date}}</td>
	  <td>{{tr.price}}</td>
	  <td><button v-on:click="tr.num -= 1">-</button> {{tr.num}} <button v-on:click="tr.num += 1">+</button></td>
	  <td><button v-on:click="remove">移除</button></td>
    </tr>
  </table>
</div>
		<!-- js最后引入-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var book = new Vue({
				el: '#book',
				data: {
					message: '书籍',
					num1: 1,
					orderBy: ["t1", "t2", "t3", "t4", "t5", "t6"], //可以控制字段的先后顺序，想调整列的先后顺序，改这个数组就行，可以做个性化设置
					tableTh: {//表头的描述信息
					        t1: {
					          title: " ", //还可以增加其他描述，比如width等
					          align: "left"
					        },
					        t2: {
					          title: "书籍名称",
					          align: "right"
					        },
							t3: {
							  title: "出版日期",
							  align: "right"
							},
							t4: {
							  title: "价格",
							  align: "right"
							},
							t5: {
							  title: "购买数量",
							  align: "right"
							},
							t6: {
							  title: "操作",
							  align: "right"
							}
					      },
					
					bookList: [{
							id: 1,
							date: '2010-10',
							price: 98,
							num: 1,
							name: 'JAVA',
						},
						{
							id: 1,
							date: '2011-10',
							price: 100,
							num: 1,
							name: 'PYTHON',
						},
						{
							id: 1,
							date: '2012-10',
							price: 111,
							num: 1,
							name: 'PHP',
						},
						{
							id: 1,
							date: '2013-10',
							price: 222,
							num: 1,
							name: '什么',
						}
					],
					
				},
				methods: {
					reduce: function() {
					this.num1=this.num1-1
					},
					add: function() {
					this.num1=this.num1+1
					},
					remove: function() {
						this.bookList.pop()
					},
				
				}
			})
			var app=new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue!'
				}
			})

			var app2 = new Vue({
				el: '#app-2',
				data: {
					message: '页面加载于 ' + new Date().toLocaleString()
				}
			})

			var app3 = new Vue({
				el: '#app-3',
				data: {
					seen: true
				}
			})
			var app4 = new Vue({
				el: '#app-4',
				data: {
					todos: [{
							text: '学习 JavaScript'
						},
						{
							text: '学习 Vue'
						},
						{
							text: '整个牛项目'
						}
					]
				}
			})
			var app5 = new Vue({
				el: '#app-5',
				data: {
					message: 'Hello Vue.js!'
				},
				methods: {
					reverseMessage: function() {
						this.message = this.message.split('').reverse().join('')
					},

				}
			})
			var app6 = new Vue({
				el: '#app-6',
				data: {
					message: 'Hello Vue.js!'
				},
				methods: {
					reverseMessageFortwo: function() {
						this.message = this.message.split(' ').reverse().join(' ')
					},

				}
			})

			var app7 = new Vue({
				el: '#app-7',
				data: {
					message: 'Hello Vue!'
				}
			})

			// -------------------------8
			Vue.component('todo-item', {
				props: ['todo'],
				template: '<li>{{ todo.text }}</li>'
			})

			var app8 = new Vue({
				el: '#app-8',
				data: {
					groceryList: [{
							id: 0,
							text: '蔬菜'
						},
						{
							id: 1,
							text: '奶酪'
						},
						{
							id: 2,
							text: '随便其它什么人吃的东西'
						}
					]
				}
			})
			// vue
			var app9 = new Vue({
				el: '#app-9',
				data: {
					ahref: 'http://www.baidu.com',
					isDisabled: true
				}
			})
			// // js
			// var check=document.getElementById("app-10js");
			// var value=check.checked;
			// alert(value);
		</script>

	</body>
</html>
